<template>
  <div class="albums-page">
    <!-- Header Section -->
    <section class="albums-header" 
             :style="{ backgroundImage: `url(${require('../assets/img/subheader-1.jpg')})` }">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h1 class="page-title" data-aos="fade-up">音乐专辑</h1>
            <p class="page-subtitle" data-aos="fade-up" data-aos-delay="200">
              发现最精彩的音乐作品集合
            </p>
            <nav aria-label="breadcrumb" data-aos="fade-up" data-aos-delay="300">
              <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item">
                  <router-link to="/" class="text-light">首页</router-link>
                </li>
                <li class="breadcrumb-item active text-light" aria-current="page">专辑</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>

    <!-- Filter Section -->
    <section class="filter-section py-4">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="search-box">
              <input 
                v-model="searchQuery"
                type="text" 
                class="form-control"
                placeholder="搜索专辑..."
              >
              <i class="fas fa-search search-icon"></i>
            </div>
          </div>
          <div class="col-md-6">
            <div class="filter-controls">
              <select v-model="selectedGenre" class="form-select me-3">
                <option value="">所有类型</option>
                <option value="流行">流行</option>
                <option value="摇滚">摇滚</option>
                <option value="电子">电子</option>
                <option value="爵士">爵士</option>
                <option value="古典">古典</option>
              </select>
              <select v-model="sortBy" class="form-select">
                <option value="newest">最新发布</option>
                <option value="popular">最受欢迎</option>
                <option value="name">按名称</option>
                <option value="year">按年份</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Music Introduction -->
    <section class="music-intro py-5">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto text-center" data-aos="fade-up">
            <!-- Loading State -->
            <div v-if="contentLoading" class="intro-card glass">
              <div class="spinner-border text-primary mb-3" role="status">
                <span class="visually-hidden">加载中...</span>
              </div>
              <p class="text-muted">正在加载专辑介绍...</p>
            </div>
            
            <!-- Error State -->
            <div v-else-if="contentError" class="intro-card glass">
              <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
              <h4 class="text-muted">内容加载失败</h4>
              <p class="text-muted">{{ contentError }}</p>
              <button class="btn btn-primary" @click="loadAlbumsContent">重新加载</button>
            </div>
            
            <!-- Content -->
            <div v-else class="intro-card glass">
              <h2 class="intro-title mb-4">{{ introduction.title }}</h2>
              <p class="intro-text mb-4">{{ introduction.description }}</p>
              <div class="intro-stats">
                <div v-for="(stat, index) in introduction.stats" :key="index" class="stat-item">
                  <span class="stat-number">{{ stat.number }}</span>
                  <span class="stat-label">{{ stat.label }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Albums Grid -->
    <section class="albums-grid py-5">
      <div class="container">
        <div v-if="filteredAlbums.length === 0" class="text-center py-5">
          <div class="empty-state">
            <i class="fas fa-compact-disc fa-4x text-muted mb-4"></i>
            <h4 class="text-muted mb-3">{{ emptyState.title }}</h4>
            <p class="text-muted mb-4">{{ emptyState.description }}</p>
            <button class="btn btn-outline-primary" @click="clearFilters">清除筛选条件</button>
          </div>
        </div>
        
        <div class="row">
          <div 
            v-for="(album, index) in filteredAlbums" 
            :key="index"
            class="col-xl-3 col-lg-4 col-md-6 col-sm-6 mb-4"
            data-aos="fade-up"
            :data-aos-delay="index * 50"
          >
            <div class="album-card glass" @click="selectAlbum(album)">
              <div class="album-image-container">
                <img :src="album.image" :alt="album.title" class="album-image">
                <div class="album-overlay">
                  <div class="overlay-content">
                    <button class="play-btn" @click.stop="playAlbum(album)">
                      <i class="fas fa-play"></i>
                    </button>
                    <div class="album-actions mt-3">
                      <button class="action-btn" @click.stop="addToFavorites(album)">
                        <i class="fas fa-heart"></i>
                      </button>
                      <button class="action-btn" @click.stop="shareAlbum(album)">
                        <i class="fas fa-share"></i>
                      </button>
                      <button class="action-btn" @click.stop="addToPlaylist(album)">
                        <i class="fas fa-plus"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="album-rating">
                  <i class="fas fa-star" v-for="n in 5" :key="n" 
                     :class="{ 'filled': n <= album.rating }"></i>
                  <span class="rating-text">{{ album.rating }}/5</span>
                </div>
              </div>
              <div class="album-info p-3">
                <h5 class="album-title">{{ album.title }}</h5>
                <p class="album-artist">{{ album.artist }}</p>
                <div class="album-meta">
                  <span class="album-year">
                    <i class="fas fa-calendar me-1"></i>{{ album.year }}
                  </span>
                  <span class="album-genre">
                    <i class="fas fa-tag me-1"></i>{{ album.genre }}
                  </span>
                </div>
                <div class="album-stats mt-2">
                  <span class="tracks-count">
                    <i class="fas fa-music me-1"></i>{{ album.tracks }}首
                  </span>
                  <span class="duration">
                    <i class="fas fa-clock me-1"></i>{{ album.duration }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Load More Button -->
        <div class="text-center mt-5" v-if="hasMoreAlbums">
          <button class="btn btn-outline-primary btn-lg" @click="loadMoreAlbums">
            加载更多专辑
            <i class="fas fa-chevron-down ms-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- Featured Albums Slider -->
    <section class="featured-albums py-5 gradient-bg">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title text-white">编辑精选</h2>
          <p class="section-subtitle text-white">不容错过的优秀专辑</p>
        </div>
        
        <div class="featured-slider" data-aos="fade-up" data-aos-delay="200">
          <div class="row">
            <div 
              v-for="(album, index) in featuredAlbums.slice(0, 4)" 
              :key="'featured-' + index"
              class="col-lg-3 col-md-6 mb-4"
            >
              <div class="featured-album-card">
                <div class="featured-image-container">
                  <img :src="album.image" :alt="album.title" class="featured-image">
                  <div class="featured-overlay">
                    <div class="featured-content">
                      <h4 class="featured-title">{{ album.title }}</h4>
                      <p class="featured-artist">{{ album.artist }}</p>
                      <button class="btn btn-light btn-sm">立即收听</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Album Detail Modal -->
    <div class="modal fade" id="albumModal" tabindex="-1" v-if="selectedAlbum">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content bg-dark text-white">
          <div class="modal-header border-0">
            <h5 class="modal-title">专辑详情</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">
                <img :src="selectedAlbum.image" :alt="selectedAlbum.title" class="img-fluid rounded">
              </div>
              <div class="col-md-6">
                <h3>{{ selectedAlbum.title }}</h3>
                <h5 class="text-muted">{{ selectedAlbum.artist }}</h5>
                <div class="album-details mt-3">
                  <p><strong>发行年份：</strong>{{ selectedAlbum.year }}</p>
                  <p><strong>音乐类型：</strong>{{ selectedAlbum.genre }}</p>
                  <p><strong>曲目数量：</strong>{{ selectedAlbum.tracks }}首</p>
                  <p><strong>总时长：</strong>{{ selectedAlbum.duration }}</p>
                  <p><strong>评分：</strong>
                    <span class="rating">
                      <i class="fas fa-star text-warning" v-for="n in 5" :key="n" 
                         :class="{ 'text-muted': n > selectedAlbum.rating }"></i>
                      {{ selectedAlbum.rating }}/5
                    </span>
                  </p>
                </div>
                <div class="modal-actions mt-4">
                  <button class="btn btn-primary me-2">
                    <i class="fas fa-play me-1"></i>播放专辑
                  </button>
                  <button class="btn btn-outline-light me-2">
                    <i class="fas fa-heart me-1"></i>收藏
                  </button>
                  <button class="btn btn-outline-light">
                    <i class="fas fa-share me-1"></i>分享
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Albums',
  data() {
    return {
      // API 相关状态
      contentLoading: true,
      contentError: null,
      introduction: { title: '', description: '', stats: [] },
      emptyState: { title: '未找到匹配的专辑', description: '尝试调整搜索条件' },
      searchQuery: '',
      selectedGenre: '',
      sortBy: 'newest',
      selectedAlbum: null,
      hasMoreAlbums: true,
      currentPage: 1,
      albums: [
        {
          title: '星空下的旋律',
          artist: '梦想乐队',
          image: require('../assets/img/albums/1.jpg'),
          duration: '45:32',
          year: '2024',
          genre: '流行',
          tracks: 12,
          rating: 4.8
        },
        {
          title: '城市夜曲',
          artist: '都市歌者',
          image: require('../assets/img/albums/2.jpg'),
          duration: '38:45',
          year: '2024',
          genre: '电子',
          tracks: 10,
          rating: 4.6
        },
        {
          title: '回忆的声音',
          artist: '时光乐团',
          image: require('../assets/img/albums/3.jpg'),
          duration: '52:18',
          year: '2023',
          genre: '摇滚',
          tracks: 15,
          rating: 4.9
        },
        {
          title: '电子幻想',
          artist: 'EDM大师',
          image: require('../assets/img/albums/4.jpg'),
          duration: '41:27',
          year: '2024',
          genre: '电子',
          tracks: 8,
          rating: 4.7
        },
        {
          title: '爵士之魂',
          artist: '蓝调女王',
          image: require('../assets/img/albums/5.jpg'),
          duration: '47:12',
          year: '2023',
          genre: '爵士',
          tracks: 11,
          rating: 4.5
        },
        {
          title: '摇滚传奇',
          artist: '雷霆乐队',
          image: require('../assets/img/albums/6.jpg'),
          duration: '55:33',
          year: '2024',
          genre: '摇滚',
          tracks: 13,
          rating: 4.8
        },
        {
          title: '古典新韵',
          artist: '交响乐团',
          image: require('../assets/img/albums/7.jpg'),
          duration: '62:45',
          year: '2023',
          genre: '古典',
          tracks: 9,
          rating: 4.9
        },
        {
          title: '流行密码',
          artist: '新星歌手',
          image: require('../assets/img/albums/8.jpg'),
          duration: '43:28',
          year: '2024',
          genre: '流行',
          tracks: 12,
          rating: 4.4
        },
        {
          title: '深夜电台',
          artist: 'Radio DJ',
          image: require('../assets/img/albums/9.jpg'),
          duration: '39:56',
          year: '2023',
          genre: '电子',
          tracks: 10,
          rating: 4.6
        },
        {
          title: '青春记忆',
          artist: '校园乐队',
          image: require('../assets/img/albums/10.jpg'),
          duration: '44:17',
          year: '2024',
          genre: '流行',
          tracks: 14,
          rating: 4.3
        },
        {
          title: '摇摆时代',
          artist: '复古乐团',
          image: require('../assets/img/albums/11.jpg'),
          duration: '48:22',
          year: '2023',
          genre: '爵士',
          tracks: 12,
          rating: 4.7
        },
        {
          title: '未来节拍',
          artist: '科技音乐家',
          image: require('../assets/img/albums/12.jpg'),
          duration: '36:44',
          year: '2024',
          genre: '电子',
          tracks: 8,
          rating: 4.5
        }
      ]
    }
  },
  async mounted() {
    await this.loadAlbumsContent()
  },
  computed: {
    filteredAlbums() {
      let filtered = this.albums

      // Search filter
      if (this.searchQuery) {
        filtered = filtered.filter(album => 
          album.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          album.artist.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      }

      // Genre filter
      if (this.selectedGenre) {
        filtered = filtered.filter(album => album.genre === this.selectedGenre)
      }

      // Sort
      switch (this.sortBy) {
        case 'popular':
          filtered = filtered.sort((a, b) => b.rating - a.rating)
          break
        case 'name':
          filtered = filtered.sort((a, b) => a.title.localeCompare(b.title))
          break
        case 'year':
          filtered = filtered.sort((a, b) => b.year - a.year)
          break
        default: // newest
          filtered = filtered.sort((a, b) => b.year - a.year)
      }

      return filtered
    },
    featuredAlbums() {
      return this.albums.filter(album => album.rating >= 4.7)
    }
  },
  methods: {
    async loadAlbumsContent() {
      try {
        this.contentLoading = true
        this.contentError = null
        
        // 向本地Node.js API发请求
        const response = await axios.get('http://localhost:3001/api/content/albums')
        
        if (response.data.success) {
          this.introduction = response.data.data.introduction || this.introduction
          this.emptyState = response.data.data.emptyState || this.emptyState
        } else {
          throw new Error(response.data.message || '获取内容失败')
        }
      } catch (error) {
        console.error('Failed to load albums content:', error)
        this.contentError = error.response?.data?.message || error.message || '无法连接到本地API服务器(localhost:3001)，请确保Node.js服务器已启动'
      } finally {
        this.contentLoading = false
      }
    },
    selectAlbum(album) {
      this.selectedAlbum = album
      const { Modal } = require('bootstrap')
      const modal = new Modal(document.getElementById('albumModal'))
      modal.show()
    },
    playAlbum(album) {
      console.log('Playing album:', album.title)
      // Implement play functionality
    },
    addToFavorites(album) {
      console.log('Added to favorites:', album.title)
      // Implement favorites functionality
    },
    shareAlbum(album) {
      console.log('Sharing album:', album.title)
      // Implement share functionality
    },
    addToPlaylist(album) {
      console.log('Added to playlist:', album.title)
      // Implement playlist functionality
    },
    loadMoreAlbums() {
      this.currentPage++
      // In a real app, load more albums from API
      if (this.currentPage >= 3) {
        this.hasMoreAlbums = false
      }
    },
    clearFilters() {
      this.searchQuery = ''
      this.selectedGenre = ''
      this.sortBy = 'newest'
    }
  }
}
</script>

<style scoped>
/* Header Styles */
.albums-header {
  height: 400px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.page-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
}

/* Filter Section */
.filter-section {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box {
  position: relative;
}

.search-box .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding-right: 50px;
  border-radius: 25px;
}

.search-box .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
}

.filter-controls {
  display: flex;
  justify-content: flex-end;
}

.filter-controls .form-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: auto;
  min-width: 150px;
}

.filter-controls .form-select option {
  background: #2d2d2d;
  color: white;
}

/* Album Cards */
.album-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.album-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.album-image-container {
  position: relative;
  overflow: hidden;
}

.album-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.album-card:hover .album-image {
  transform: scale(1.05);
}

.album-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.album-card:hover .album-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
}

.play-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  color: white;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.play-btn:hover {
  transform: scale(1.1);
}

.album-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.album-rating {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
}

.album-rating .fas.filled {
  color: #ffd700;
}

.album-rating .fas {
  color: rgba(255, 255, 255, 0.3);
  margin-right: 2px;
}

.rating-text {
  color: white;
  margin-left: 5px;
}

.album-info {
  padding: 1.5rem 1rem;
}

.album-title {
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.album-artist {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.album-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}

.album-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Featured Albums */
.featured-album-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 300px;
}

.featured-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  padding: 2rem 1.5rem 1.5rem;
  color: white;
}

.featured-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.featured-artist {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .filter-controls {
    margin-top: 1rem;
    justify-content: flex-start;
  }
  
  .filter-controls .form-select {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .album-image {
    height: 200px;
  }
}

/* Section Titles */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Music Introduction */
.intro-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3rem;
}

.intro-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.intro-text {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

.intro-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
}

.intro-stats .stat-item {
  text-align: center;
}

.intro-stats .stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #4ecdc4;
  margin-bottom: 0.5rem;
}

.intro-stats .stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

/* Enhanced Empty State */
.empty-state {
  max-width: 400px;
  margin: 0 auto;
}

.empty-state .fa-compact-disc {
  animation: spin 3s linear infinite;
  opacity: 0.5;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive adjustments for intro */
@media (max-width: 768px) {
  .intro-card {
    padding: 2rem;
  }
  
  .intro-title {
    font-size: 2rem;
  }
  
  .intro-stats {
    gap: 2rem;
  }
}
</style>
